在 addEventListener 的寫法出現前,是在 HTML 的標籤內直接寫入事件,假如要寫入一個 click 事件,會這樣寫:
<input type="button" onclick="clickBtn()" class="button" value="CLICK">
就像在 input
標籤上直接加入一個 function,再透過 JS 把這個 function 內容寫出來:
function clickBtn() {
alert("hello world!");
}
點擊 button
的時候,就會出現彈跳視窗。
CodePen: https://codepen.io/hnzxewqw/pen/xxGgmXV
不過這是比較舊的寫法,至今還有人這樣寫,也沒什麼不對,那現在前端為了避免 XSS 攻擊事件,所以都盡量不在 HTML 標籤上寫上 script 相關標籤,以免被埋入程式碼。
關於 XSS 攻擊事件
比較新的新增事件的寫法如下:
<input type="button" value="CLICK" class="button">
對比之下,少了 onclick
這個事件在標籤上,但使用選取器 querySelector
的方式,變成下方程式碼寫法:
var button = document.querySelector(".button");
button.addEventListener(
"click",
function () {
alert("HELLO WORLD!");
},
false
);
所呈現出來的結果是相同的。
CodePen: https://codepen.io/hnzxewqw/pen/OJVWrQE
這邊使用一個按鈕,在點擊時會產生監聽事件:
<input type="button" value="CLICK" class="button">
要在 button 上新增一個監聽事件時,JS 的起手式是這樣:
var el = document.querySelector(".button");
el.addEventListener("click", function () {}, false);
說明:
在選取的元素中新增事件時,後面的參數是要這樣寫,
選擇要出現的事件,事件有很多種,不只是 click
,可能還有 hover
也是,但 click
滿常使用的。
中間為匿名 function,帶入要出現的功能。
布林值,決定要不要產生冒泡事件,如果不指定,會自動產生冒泡事件。
onclick
無法綁定兩個事件
addEventListener
可以綁定多個事件
用程式碼來舉例,下面有兩個按鈕,分別為 btnA 跟 btnB,HTML 如下:
<input type="button" value="btnA" class="btnA">
<input type="button" value="btnB" class="btnB">
這邊兩個監聽事件都做兩個 alert 來測試效果,
// onclick 效果
var btnA = document.querySelector(".btnA");
btnA.onclick = function () {
alert("AA-1");
};
btnA.onclick = function () {
alert("AA-2");
};
//addEventListener效果
var btnB = document.querySelector(".btnB");
btnB.addEventListener(
"click",
function () {
alert("BB-1");
},
false
);
btnB.addEventListener(
"click",
function () {
alert("BB-2");
},
false
);
透過 CodePen 測試可以看到,onclick
只能讀取到第二個 alert
事件,無法綁定多個,而 addEventListener 可以綁定多個 alert
事件。
CodePen: https://codepen.io/hnzxewqw/pen/wvagLQq